<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/ratchet.css"/>
<style type="text/css">
	#charts-draw{
      	position:absolute;
		top:40px;
		left:50px;
      	text-align: center;
      	margin:20px;
      	font-size:50px;
		width:700px;
		height:400px;
		border-color:#F00;
		border:solid;
		background-color:#FFF;  
		filter:shadow(color="#CACACA",offx=15,offy=22,positive=false);
      }
	  .unhold-chart{
      	position:absolute;
      	bottom:0;
      	top:0;
      	left:0;
      	right:0;
      	font-size:50px;
      	text-align: center;
      	border:3px dashed #ccc;
      }
	  #button3{
			position:absolute;
			left:700px;
			top:50px;
			}
	  
 </style>
 <script type="text/javascript" src="../res/js/jQuery/jquery-1.11.2.min.js"></script>
 <script type="text/javascript" src="../res/js/highcharts/highcharts.js"></script>
 <script type="text/javascript" src="../res/js/highcharts/highcharts-3d.js"></script>
<!-- <script type="text/javascript" src="../js/getcharts-mob.js"></script>-->
 <script type="text/javascript">
 function test(){
	 alert("pie");
	 }
 function drawchart(){
				if(chartID == "menupie"){
					createPie3D();		//创建图表
					//choostype = "pie";
				}else if(chartID == "menucolumn"){
					createColumn3D();
				}else if(chartID == "menuline"){
					createLine3D();
				}else if(chartID == "menuscatter"){
					createScatter3D();
				}else if(chartID == "menuarea"){
					createArea3D();
					}
			}
 </script>
<title>Highcharts绘图</title>
</head>

<body>
		<header class="bar bar-nav">
  			<h1 class="title"><font color="#0099FF" size="+2" face="微软雅黑">Highcharts绘图</font></h1>
		</header>
        <div class="content">
        <div id="charts-draw"  class="draw" align="center" >
							<div align="center" id="chart-component-placeholder" class="unhold-chart">

							</div>
			</div>
            <br>
            <br>
            
           <div id="button3">
        <ul>
         <ul><button class="btn btn-positive" id="menupie" onClick="createPie3D()" style="height:60px; width:150px;"><font face="微软雅黑" size="3">Highcharts饼图</font></button></ul>
         <br>
         <ul><button class="btn btn-primary" id="menuline" style="height:60px; width:150px;" onClick="createLine3D()"><font face="微软雅黑" size="3">Highcharts折线图</font></button></ul>
         <br>
         <ul><button class="btn btn-negative " id="menucolumn"style="height:60px; width:150px;" onClick="createColumn3D()"><font face="微软雅黑" size="3">Highcharts柱状图</font></button></ul>
        </ul>
        <ul>
         <ul><button class="btn btn-primary" id="menuscatter" style="height:60px; width:150px;" onClick="createScatter3D()"><font face="微软雅黑" size="3">Highcharts散点图</font></button></ul>
         <br>
		 <ul><button class="btn btn-positive" id="menuarea" style="height:60px; width:150px;" onClick="createArea3D()"><font face="微软雅黑" size="3">Highcharts面积图</font></button></ul>
        </ul>  
           </div>
           
           <nav class="bar bar-tab">
 			 <a class="tab-item active" href="index-mob.html">基于HTML5的3D数据展示软件</a>
                         <a class="tab-item" href="canvasLine.php">Canvas绘图</a>
           </nav>
        </div>
</body>
<script>
    <?php
        $link=mysql_connect(SAE_MYSQL_HOST_M.':'.SAE_MYSQL_PORT,SAE_MYSQL_USER,SAE_MYSQL_PASS);
        if($link)
        {
            mysql_select_db(SAE_MYSQL_DB,$link);
            //your code goes here	
        }
   ?>	
// JavaScript Document
function createPie3D(){
		$("#charts-draw").highcharts({
	        chart: {
	            type: 'pie',
	            options3d: {
	                enabled: true,
	                alpha: 45,
	                beta: 0
	            }
	        },
	        title: {
	            text: '数据1-2014年10月全球操作系统市场占有率'
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                depth: 35,
	                dataLabels: {
	                    enabled: true,
	                    format: '{point.name}'
	                }
	            }
	        },
	        series: [{
	            type: 'pie',
	            name: '市场占有率',
                    
            <?php
                $sql_p ="SELECT * FROM HPie order by id asc";
                $result_P = mysql_query($sql_p)
                   or die(SQL语句执行失败);     
                echo 'data:[';
                while($row =mysql_fetch_row($result_P))
                    {	
                        echo "['".$row[1]."',".$row[2].'],';              												
                    }
                    echo ']';
            ?>	
	        }]
	    });	
	}

	function createColumn3D(){
		 // Set up the chart
	  $("#charts-draw").highcharts({
	        chart: {
	            type: 'column',
	            margin: 75,
	            options3d: {
	                enabled: true,
	                alpha: 0,
	                beta: 20,
	                depth: 50,
	                viewDistance: 25
	            }
	        },
	        title: {
	            text: '数据1-2014年各城市降雨量',
	        },
	        subtitle: {
	            text: '南城启航'
	        },
	        plotOptions: {
	            column: {
	                depth: 25
	            }
	        },
			 xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },

            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },

	        series: [{
	          	name: 'Tokyo',
         <?php
                $sql_cl ="SELECT * FROM HColumn order by id asc";
                $result_C = mysql_query($sql_cl)
                   or die(SQL语句执行失败);     
                echo 'data:[';
                while($row =mysql_fetch_row($result_C))
                    {	
                        echo $row[1].',';              												
                    }
                    echo ']';
         ?>
                //data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }, {
                name: 'New York',
        <?php 
                $sql_cl ="SELECT * FROM HColumn order by id asc";
                $result_C = mysql_query($sql_cl)
                   or die(SQL语句执行失败);   
                echo 'data:[';
                        while($row =mysql_fetch_row($result_C))
                            {	
                                echo $row[2].',';              												
                            }
            echo ']';
        ?>
                //data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
            }, {
                name: 'London',
        <?php 
                $sql_cl ="SELECT * FROM HColumn order by id asc";
                $result_C = mysql_query($sql_cl)
                        or die(SQL语句执行失败);
                echo 'data:[';
                        while($row =mysql_fetch_row($result_C))
                            {	
                                echo $row[3].',';              												
                            }
            echo ']';
        ?>        
                //data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
            }, {
                name: 'Berlin',
        <?php
                $sql_cl ="SELECT * FROM HColumn order by id asc";
                $result_C = mysql_query($sql_cl)
                        or die(SQL语句执行失败);
                echo 'data:[';
                        while($row =mysql_fetch_row($result_C))
                            {	
                                echo $row[4].',';              												
                            }
            echo ']';
        ?>        
                //data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
	        }]
	    });
	}
	
			
	

	function createLine3D(){
	   $("#charts-draw").highcharts({
	        chart: {
	            type: 'line',
	            margin: 75,
	            options3d: {
	                enabled: true,
	                alpha: 10,
	                beta: 10,
	                depth: 50,
	                viewDistance: 25,
	            }
	        },
	        title: {
	            text: '数据1-某学生一学年的数学成绩'
	        },
	        subtitle: {
	            text: '南城启航'
	        },
	        plotOptions: {
	            column: {
	                depth: 25
	            }
	        },
	        series: [{
        <?php 
                $sql_L ="SELECT data FROM HLine order by id asc";
                $result_L = mysql_query($sql_L)
                   or die(SQL语句执行失败);     
                echo 'data:[';
                while($row =mysql_fetch_row($result_L))
                    {	                  
                        echo $row[0].',';              												
                    }
                    echo ']';
        ?>
	            //data: [115,98,113,105,114,119,117,130,128,135,131,129]
	        }]
	    });
	}

// Give the points a 3D feel by adding a radial gradient
    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });
	
	function createScatter3D(){//散点图
	   $("#charts-draw").highcharts({
	        chart: {
	            margin: 100,
	            type: 'scatter',
	            options3d: {
	                enabled: true,
	                alpha: 10,
	                beta: 30,
	                depth: 250,
	                viewDistance: 5,

	                frame: {
	                    bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
	                    back: { size: 1, color: 'rgba(0,0,0,0.04)' },
	                    side: { size: 1, color: 'rgba(0,0,0,0.06)' }
	                }
	            }
	        },
	        title: {
	            text: 'test',
	        },
	        subtitle: {
	            text: '南城启航'
	        },
	        plotOptions: {
	            scatter: {
	                width: 10,
	                height: 10,
	                depth: 10
	            }
	        },
	        yAxis: {
				min:0,
				max:10,
	            title: null,
	        },
	        xAxis: {
				min:0,
				max:10,
				gridLineWidth: 1,
				title: null,
				categories:null,
				
	        },
	        zAxis: {
				min:0,
				max:10,
				title:null,
				categories:null,
	       
	        },
	        legend: {
	            enabled: false
	        },
	        series: [{
	            name: '展示数据',				
	            colorByPoint: true,
            <?php
                $sql_S ="SELECT * FROM HScatter order by id asc";
                $result_S = mysql_query($sql_S)
                   or die(SQL语句执行失败);     
                echo 'data:[';
                while($row =mysql_fetch_row($result_S))
                    {	
                        echo '['.$row[1].','.$row[2].','.$row[3].'],';              												
                    }
                    echo ']';
            ?>
	            //data: [[1,6,5],[8,7,9],[1,3,4],[4,6,8],[5,7,7],[6,9,6],[7,0,5],[2,3,3],[3,9,8],[3,6,5],[4,9,4],[2,3,3],[6,9,9],[0,7,0],[7,7,9],[7,2,9],[0,6,2],[4,6,7],[3,7,7],[0,1,7],[2,8,6],[2,3,7],[6,4,8],[3,5,9],[7,9,5],[3,1,7],[4,4,2],[3,6,2],[3,1,6],[6,8,5],[6,6,7],[4,1,1],[7,2,7],[7,7,0],[8,8,9],[9,4,1],[8,3,4],[9,8,9],[3,5,3],[0,2,4],[6,0,2],[2,1,3],[5,8,9],[2,1,1],[9,7,6],[3,0,2],[9,9,0],[3,4,8],[2,6,1],[8,9,2],[7,6,5],[6,3,1],[9,3,1],[8,9,3],[9,1,0],[3,8,7],[8,0,0],[4,9,7],[8,6,2],[4,3,0],[2,3,5],[9,1,4],[1,1,4],[6,0,2],[6,1,6],[3,8,8],[8,8,7],[5,5,0],[3,9,6],[5,4,3],[6,8,3],[0,1,5],[6,7,3],[8,3,2],[3,8,3],[2,1,6],[4,6,7],[8,9,9],[5,4,2],[6,1,3],[6,9,5],[4,8,2],[9,7,4],[5,4,2],[9,6,1],[2,7,3],[4,5,4],[6,8,1],[3,4,0],[2,2,6],[5,1,2],[9,9,7],[6,9,9],[8,4,3],[4,1,7],[6,2,5],[0,4,9],[3,5,9],[6,9,1],[1,9,2]]
	        }]
	    });
	}
	
	function createArea3D(){
		$("#charts-draw").highcharts({
        chart: {
            type: 'area',
        },
        title: {
            text:  '数据1-战后美苏核武储备',
        },


        xAxis: {
            allowDecimals: false,
        },
        yAxis: {
            title: {
                text:'Nuclear weapon states',
            }
     	},

        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name:'USA',
            <?php
                $sql_A ="SELECT * FROM HArea order by id asc";
                $result_A = mysql_query($sql_A)
                   or die(SQL语句执行失败);   
                echo 'data:[';
                        while($row =mysql_fetch_row($result_A))
                            {	
                                echo $row[1].',';              												
                            }
                echo '],';
            ?>
        }, {
            name: 'USSR/Russia',
            <?php
                 $sql_A ="SELECT * FROM HArea order by id asc";
                $result_A = mysql_query($sql_A)
                   or die(SQL语句执行失败);   
                echo 'data:[';
                        while($row =mysql_fetch_row($result_A))
                            {	
                                echo $row[2].',';              												
                            }
                echo '],';
            ?>
        }]
    });
}
<?php 
        mysql_free_result($result_C);
        mysql_free_result($result_S);
        mysql_free_result($result_P);
        mysql_free_result($result_L);
        mysql_free_result($result_A);
        mysql_close();
?>
</script>
</html>
